<template>
  <div class="product-detail-container">
    <Banner :p="p" />
    <Menu :p="p" />
    <MainSec :p="p" />
    <Section title="产品优势">
      <template #left>
        <Element :background="bg1" :height="256">
          <div class="advantage">
            建立企业产品标准化、规范化的生产和管理程序，使传统的经验生产方式向科学的生产方式转变
          </div>
        </Element>
      </template>
      <template #right>
        <Element :background="bg2" :height="256">
          <div class="advantage">
            建立以标准化为基础、规范化为制约的产品质量控制体系
          </div>
        </Element>
      </template>
    </Section>
    <Section title="产品功能">
      <template #left>
        <Element>
          <div class="function">
            <img :src="icon1" alt="" />
            <div class="function-title">产品管理</div>
            <div class="function-detail">
              实现产品从创建、审核、归档、发布、变更、废止等生命周期管理，清晰标识和管理产品及零部件状态，可通过权限或流程严格控制产品或零部件状态的改变。
            </div>
          </div>
        </Element>
      </template>
      <template #right>
        <Element>
          <div class="function">
            <div class="function">
              <img :src="icon2" alt="" />
              <div class="function-title">标识管理</div>
              <div class="function-detail">
                按照企业规范建立产品编码规则，可根据企业编码规则自动生成产品编码，确保编码的准确性与唯一性，做到一物一码，一码追溯产品全生命周期。
              </div>
            </div>
          </div>
        </Element>
      </template>
    </Section>
    <Section onePart :height="182" title="应用场景">
      <template #left>
        <div class="apply">
          <img :src="img" alt="" />
          <div class="text">安全应急制造企业</div>
        </div>
      </template>
    </Section>
    <Footer :p="p" />
  </div>
</template>

<script>
import Banner from "@/components/IndexComps/Banner.vue";
import Menu from "@/components/IndexComps/Menu.vue";
import Footer from "@/components/IndexComps/Footer.vue";
import MainSec from "@/components/ProductDetailComps/MainSec.vue";
import Section from "@/components/ProductDetailComps/Section.vue";
import bg1 from "@/assets/data/exports/bg@1x.png";
import bg2 from "@/assets/data/exports/bg2@1x.png";
import Element from "@/components/ProductDetailComps/Element.vue";
import icon1 from "@/assets/data/exports/产品管理@1x.png";
import icon2 from "@/assets/data/exports/标识解析@1x.png";
import img from "@/assets/data/exports/Rectangle398@2x.png";
export default {
  components: {
    Banner,
    Menu,
    Footer,
    MainSec,
    Section,
    Element,
  },
  data() {
    return {
      p: 6,
      bg1,
      bg2,
      icon1,
      icon2,
      img,
    };
  },
};
</script>

<style lang="scss" scoped>
.product-detail-container {
  background: #f6f6fb;
  .advantage {
    width: 65%;
    font-size: 15px;
    color: #555555;
    line-height: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
  .function {
    display: flex;
    align-items: center;
    flex-direction: column;
    img {
      height: 75px;
      margin-bottom: 10px;
    }
    .function-title {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    .function-detail {
      font-size: 14px;
      color: #555555;
      line-height: 28px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }

  .apply {
    width: 414px;
    height: 240px;
    background: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    img {
      width: 100%;
    }
    .text {
      width: 100%;
      text-align: center;
      margin: 10px auto;
      font-weight: bold;
      font-size: 18px;
    }
  }
}
</style>
